:root {
  --header-height: 4rem;
}

/* 定义滚动条的轨道和滑块颜色变量 */
:root {
  --scrollbar-track-color: #f8fafc;
  --scrollbar-thumb-color: rgba(190, 190, 190, 1);
  --scrollbar-thumb-hover-color: rgba(174, 174, 174, 1);
}

/* 暗色模式下的颜色 */
.dark {
  --scrollbar-track-color: #111729;
  --scrollbar-thumb-color: rgba(190, 190, 190, 0.3);
  --scrollbar-thumb-hover-color: rgba(174, 174, 174, 0.4);
}

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 6px;
  /*对垂直流动条有效*/
  height: 6px;
  /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color);
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: var(--scrollbar-thumb-color);
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}

/*定义滑块悬停变化颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover-color);
  cursor: pointer;
}

/* 定义滚动条的轨道和滑块颜色变量 */
:root {
  --scrollbar-track-color: #f8fafc;
  --scrollbar-thumb-color: rgba(190, 190, 190, 1);
  --scrollbar-thumb-hover-color: rgba(174, 174, 174, 1);
}

/* 暗色模式下的颜色 */
.dark {
  --scrollbar-track-color: #111729;
  --scrollbar-thumb-color: rgba(190, 190, 190, 0.3);
  --scrollbar-thumb-hover-color: rgba(174, 174, 174, 0.4);
}

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 6px;
  /*对垂直流动条有效*/
  height: 6px;
  /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color);
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: var(--scrollbar-thumb-color);
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}

/*定义滑块悬停变化颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover-color);
  cursor: pointer;
}
